{% block sw_settings_units %}
<sw-page class="sw-settings-units">
    <template #search-bar>
        <sw-search-bar />
    </template>

    <template #smart-bar-header>
        <h2>
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            />
            {{ $tc('sw-settings-units.general.mainMenuItemGeneral') }}
        </h2>
    </template>

    <template #smart-bar-actions>
        <mt-button
            v-tooltip="tooltipCreate"
            class="sw-settings-units__create-action"
            variant="primary"
            :disabled="isAddingUnitsDisabled || !acl.can('scale_unit.creator') || undefined"
            size="default"
            @click="createNewUnit"
        >
            {{ $tc('sw-settings-units.general.createNewUnit') }}
        </mt-button>
    </template>

    <template #language-switch>
        <sw-language-switch
            :disabled="!!newUnit || undefined"
            @on-change="onChangeLanguage"
        />
    </template>

    <template #content>
        <sw-card-view>
            <mt-card
                position-identifier="sw-settings-units-content"
                :class="{ 'sw-settings-units-card-empty': isEmpty }"
            >
                <mt-empty-state
                    v-if="!isLoading && isEmpty"
                    :icon="$route.meta.$module.icon"
                    :headline="$tc('sw-settings-units.empty-state.title')"
                    :description="$tc('sw-settings-units.empty-state.subline')"
                />

                <template #grid>
                    <sw-data-grid
                        v-show="isLoading || !isEmpty"
                        ref="swDataGrid"
                        class="sw-settings-units-grid"
                        :is-loading="isLoading"
                        :data-source="unitList"
                        :columns="unitColumns()"
                        :show-selection="false"
                        :allow-inline-edit="acl.can('scale_unit.editor') || undefined"
                        :skeleton-item-amount="placeholderAmount"
                        @inline-edit-save="saveUnit"
                        @inline-edit-cancel="cancelUnit"
                    >

                        <template #actions="{ item }">
                            <sw-context-menu-item
                                class="sw-settings-units__edit-action"
                                :disabled="!acl.can('scale_unit.editor') || undefined"
                                @click="editUnit(item)"
                            >
                                {{ $tc('global.default.edit') }}
                            </sw-context-menu-item>

                            <sw-context-menu-divider />

                            <sw-context-menu-item
                                class="sw-settings-units__delete-action"
                                variant="danger"
                                :disabled="!acl.can('scale_unit.deleter') || undefined"
                                @click="deleteUnit(item)"
                            >
                                {{ $tc('global.default.delete') }}
                            </sw-context-menu-item>
                        </template>

                    </sw-data-grid>
                </template>
            </mt-card>
        </sw-card-view>
    </template>
</sw-page>
{% endblock %}
